<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<%@ include file="/common/taglib.jsp" %>
<%@ include file="/common/common.jsp" %>    
<base href="<%=basePath%>">
<title>鸿福迎门</title>
<link rel="stylesheet" href="bootstrap-3.3.5/css/bootstrap.min.css">
<!--渐隐样式-->
<link rel="stylesheet" href="play/css/luara.css"/>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="jquery-1.11.3/jquery.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<!--Luara js文件-->
<script src="play/js/jquery.luara.0.0.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$("#case").addClass("active"); //添加样式
	});
</script>
<style type=text/css>
	body{
		background-color:#f1f5f8;
	}
	.title{
		text-align:center;
		margin-top:20px;
	}
	.imglist{
		text-align:center;
	}
	.table1 { width:100%; float:left;border-collapse:collapse; margin-top:15px;}
	.table1 tr td { border: 1px solid #dcdcdc; border-collapse:collapse; height:24px; line-height:24px; padding:10px; font-size:14px; color:#333 }
	.table1 tr .td1{ background:#f7f7f7; text-align:center;width:100px;}
	.table1 tr .td2 { width:198px }
	.table1 tr td span {  height:24px;  display:block; text-align:center; margin:0 10px; font-weight:bolder; }
	.table1 tr td strong { color:red;font-size:16px; }


	.flexslider {
	margin: 0px auto 20px;
	position: relative;
	width: 100%;
	height: 482px;
	overflow: hidden;
	zoom: 1;
	}

	.flexslider .slides li {
		width: 100%;
		height: 100%;
	}

	.flex-direction-nav a {
		width: 70px;
		height: 70px;
		line-height: 99em;
		overflow: hidden;
		margin: -35px 0 0;
		display: block;
		background: url(images/ad_ctr.png) no-repeat;
		position: absolute;
		top: 50%;
		z-index: 10;
		cursor: pointer;
		opacity: 0;
		filter: alpha(opacity=0);
		-webkit-transition: all .3s ease;
		border-radius: 35px;
	}

	.flex-direction-nav .flex-next {
		background-position: 0 -70px;
		right: 0;
	}

	.flex-direction-nav .flex-prev {
		left: 0;
	}

	.flexslider:hover .flex-next {
		opacity: 0.8;
		filter: alpha(opacity=25);
	}

	.flexslider:hover .flex-prev {
		opacity: 0.8;
		filter: alpha(opacity=25);
	}

	.flexslider:hover .flex-next:hover,
	.flexslider:hover .flex-prev:hover {
		opacity: 1;
		filter: alpha(opacity=50);
	}

	.flex-control-nav {
		width: 100%;
		position: absolute;
		bottom: 10px;
		text-align: center;
	}

	.flex-control-nav li {
		margin: 0 2px;
		display: inline-block;
		zoom: 1;
		*display: inline;
	}

	.flex-control-paging li a {
		background: url(images/dot.png) no-repeat 0 -16px;
		display: block;
		height: 16px;
		overflow: hidden;
		text-indent: -99em;
		width: 16px;
		cursor: pointer;
	}

	.flex-control-paging li a.flex-active,
	.flex-control-paging li.active a {
		background-position: 0 0;
	}

	.flexslider .slides a img {
		width: 100%;
		height: 430px;
		
	}
</style>
</head>
<body>
<jsp:include page="/index/head.html"></jsp:include>
<div class="container">
	<div class="body">
		<h2 class="title">${c.houseName }&nbsp;&nbsp; ${c.size }平米</h2>
		<div class="imgs">
			<div id="banner_tabs" class="flexslider">
	<ul class="slides">
		<c:forEach items="${cImgs }" var="img">
			<li>
				<a title="" target="_blank" href="#">
					<img width="1920" height="150px" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="${img.src }">
				</a>
			</li>
		</c:forEach>
	</ul>
	<ul class="flex-direction-nav">
		<li><a class="flex-prev" href="javascript:;">Previous</a></li>
		<li><a class="flex-next" href="javascript:;">Next</a></li>
	</ul>
	<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
		<c:forEach items="${cImgs }" var="img" varStatus="status">
			<li><a>${status.index+1 }</a></li>
		</c:forEach>
	</ol>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
	var bannerSlider = new Slider($('#banner_tabs'), {
		time: 5000,
		delay: 400,
		event: 'hover',
		auto: true,
		mode: 'fade',
		controller: $('#bannerCtrl'),
		activeControllerCls: 'active'
	});
	$('#banner_tabs .flex-prev').click(function() {
		bannerSlider.prev()
	});
	$('#banner_tabs .flex-next').click(function() {
		bannerSlider.next()
	});
})
</script>
		</div>
		<div>
			<table border="0" cellspacing="0" cellpadding="0" class="table1">
					<tbody><tr>
						<td class="td1">
							<span>
								楼盘
							</span>
						</td>
						<td class="td2">
							${c.houseName }
						</td>
						<td class="td1">
							<span>
								风格
							</span>
						</td>
						<td class="td2">
							${c.styleValue }
						</td>
						<td class="td1">
							<span>
								户型
							</span>
						</td>
						<td class="td2">
							${c.houseTypeValue }
						</td>
					</tr>
					<tr>
						<td class="td1">
							<span>
								面积
							</span>
						</td>
						<td class="td2">
							${c.size }平方米
						</td>
						<td class="td1">
							<span>
								总造价
							</span>
						</td>
						<td class="td2">
							<strong>
								${c.budget }万元
							</strong>
						</td>
						<td class="td1">
							<span>
								说明
							</span>
						</td>
						<td class="td2">
								${c.cDesc }
						</td>
					</tr>
					
				</tbody></table>
		</div>
	</div>
</div>
<jsp:include page="/index/bottom.html"></jsp:include>
</body>
</html>